<template>
  <van-skeleton title avatar :row="3" :loading="loading" v-for="user in userList">
    <van-card
        :desc="user.profile"
        :title="user.username"
        :thumb="user.avatarUrl"
    >
      <template #tags>
        <van-tag plain type="danger" v-for="tag in user.tags" style="margin-right: 8px;margin-top: 8px;">{{tag}}</van-tag>
      </template>
      <template #footer v-if="props.isShowButton">
        <van-button size="small" @click="doFollow(user.id,user.followStatus)">{{user.followStatus}}</van-button>
        <van-button size="small" @click="toUserDetail(user.id)">详情</van-button>
      </template>
    </van-card>
  </van-skeleton>
</template>

<script setup lang="ts">
import {UserType} from "../model/user";
import {onMounted, ref, watchEffect} from "vue";
import myAxios from "../request/myAxios";
import {Toast} from "vant";
import {useRouter} from "vue-router";
interface UserCardListProps{
  userList:UserType[];
  loading:true;
  isShowButton:false;
}
const router = useRouter();
const props = defineProps<UserCardListProps>()
const doFollow = (id:number,status:string) => {
  if (status == '关注'){
    myAxios.post('/follow/'+id+'/true').then(res=>{
      Toast.success(res.data?.data);
    })
  }
  if (status == '已关注'){
    myAxios.post('/follow/'+id+'/false').then(res=>{
      Toast.success(res.data?.data);
    })
  }
}
const toUserDetail = (id:number) => {
  router.push({
    path:'/user/detail',
    query:{
      id,
    }
  })
}
onMounted(()=>{

})
</script>

<style scoped>

</style>
